<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频文字提取进度演示</title>
    <style>
        .progress-bar {
            width: 300px;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: #4caf50;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <input type="file" id="videoInput" accept="video/*">
    <button id="submitButton">提交视频</button>
    <div class="progress-bar">
        <div class="progress" id="progressBar"></div>
    </div>
    <div id="statusText"></div>

    <script>
        const videoInput = document.getElementById('videoInput');
        const submitButton = document.getElementById('submitButton');
        const progressBar = document.getElementById('progressBar');
        const statusText = document.getElementById('statusText');

        submitButton.addEventListener('click', async () => {
            const file = videoInput.files[0];
            if (!file) {
                alert('请选择一个视频文件');
                return;
            }

            const reader = new FileReader();
            reader.onload = async (event) => {
                const videoBase64 = event.target.result.split(',')[1];
                const response = await fetch('/extract_video_text', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        video_base64: videoBase64,
                        language: 'zh-CN',
                        extract_frames: false,
                        frame_interval: 5.0,
                        max_frames: 10
                    })
                });

                const data = await response.json();
                const taskId = data.data.task_id;
                checkTaskStatus(taskId);
            };
            reader.readAsDataURL(file);
        });

        async function checkTaskStatus(taskId) {
            const response = await fetch(`/task_status/${taskId}`);
            const data = await response.json();
            const { current, total, status, state } = data.data;
            const progress = (current / total) * 100;

            progressBar.style.width = `${progress}%`;
            statusText.textContent = `${status} (${state})`;

            if (state === 'SUCCESS') {
                statusText.textContent = '处理完成';
                // 处理最终结果
                console.log(data.data.result);
            } else if (state === 'FAILURE') {
                statusText.textContent = `处理失败: ${status}`;
            } else {
                setTimeout(() => checkTaskStatus(taskId), 1000);
            }
        }
    </script>
</body>
</html>
